<template>
  <div class="h_100b scroll_y Detailed">
    <div id="title">
      <ul class="d_f color4">
        <span class="color3 fs_1-5rem" v-title>{{ Info.name }}</span>
        <span class="color3 fs_1rem" v-title>{{ Info.code }}</span>
      </ul>
      <ul class="mt_10 d_f fs_1-25rem" :style="txtStyle">
        <li>
          <span v-title>{{ takeDecimal(Info.last_price) }}</span>
          <!-- <h5>价格</h5> -->
        </li>
        <li>
          <span v-title>
            {{ takeDecimal(Info.change_value) }}
          </span>
          <!-- <h5>涨跌价</h5> -->
        </li>
        <li>
          <span v-title>
            {{ takeDecimal(Info.change_rate) + "%" }}
          </span>
          <!-- <h5>涨跌幅比例</h5> -->
        </li>
      </ul>
    </div>
    <div id="orderBook" class="mt_10" v-if="type != 2">
      <div v-for="(item, index) in OrderBook.Ask" :key="index">
        <span>{{ `买${numToString(index + 1)}` }}</span>
        <span v-title>{{ item[0] || 0 }}</span>
        <span v-title>{{ item[1] || 0 }}</span>
        <span :class="{ color5: item[2] }" v-title>{{ item[2] || 0 }}</span>
      </div>
      <div v-for="(item, index) in OrderBook.Bid" :key="index">
        <span>{{ `卖${numToString(index + 1)}` }}</span>
        <span v-title>{{ item[0] || 0 }}</span>
        <span v-title>{{ item[1] || 0 }}</span>
        <span :class="{ color5: !item[2] }" v-title>{{ item[2] || 0 }}</span>
      </div>
    </div>
    <div id="table" class="mt_10">
      <span v-title>最高价</span>
      <span v-title>{{ changeMoney(Info.high_price) }}</span>
      <span v-title>今开</span>
      <span v-title>{{ changeMoney(Info.last_price) }}</span>
      <span v-title>最低价</span>
      <span v-title>{{ changeMoney(Info.low_price) }}</span>
      <span v-title>昨收</span>
      <span v-title>{{ changeMoney(Info.prev_close_price) }}</span>
      <span v-title>市盈率</span>
      <span v-title>{{ takeDecimal(Info.pe_ratio) }}</span>
      <span v-title>市净率</span>
      <span v-title>{{ takeDecimal(Info.pb_ratio) }}</span>
      <span v-title>总市值</span>
      <span v-title>{{ changeMoney(Info.total_market_val) }}</span>
      <span v-title>流通市值</span>
      <span v-title>{{ changeMoney(Info.circular_market_val) }}</span>
      <span v-title>总成交额</span>
      <span v-title>{{ changeMoney(Info.turnover) }}</span>
      <span v-title>换手率</span>
      <span v-title>{{ takeDecimal(Info.turnover_rate) + "%" }}</span>
    </div>
    <div id="operation" class="mt_10 w_100b" v-if="screenSize.num >= 768">
      <div class="d_f" style="justify-content: space-between">
        <h4>关注</h4>
      </div>
      <el-space class="mt_5 btns">
        <el-button
          type="primary"
          size="small"
          v-if="Stocks['concern'].indexOf(Info.code) == -1"
          @click="handleClick('add', 'concern')"
          >关注</el-button
        >
        <el-button size="small" v-else @click="handleClick('del', 'concern')"
          >取消关注</el-button
        >
        <el-button
          type="primary"
          v-if="Stocks['gold'].indexOf(Info.code) == -1"
          size="small"
          @click="handleClick('add', 'gold')"
          >加入金池</el-button
        >
        <el-button v-else size="small" @click="handleClick('del', 'gold')"
          >取消金池</el-button
        >
        <el-button
          type="primary"
          v-if="Stocks['warn'].indexOf(Info.code) == -1"
          size="small"
          @click="handleClick('add', 'warn')"
          >加入预警</el-button
        >
        <el-button v-else size="small" @click="handleClick('del', 'warn')"
          >取消预警</el-button
        >
      </el-space>
    </div>
    <div id="plate" class="mt_10 w_100b">
      <h4 v-if="type != 2">所属板块</h4>
      <div v-for="(item, index) in Plate.HY" :key="index">
        <span class="mr_10" v-title>{{ item.code }}</span>
        <span v-title>{{ item.name }}</span>
      </div>
      <div v-for="(item, index) in Plate.GN" :key="index">
        <span class="mr_10" v-title>{{ item.code }}</span>
        <span v-title>{{ item.name }}</span>
      </div>
    </div>
    <ul v-if="market != 'a' && type == 2" id="rtTicker" class="mt_10 w_100b">
      <h4 v-if="type != 2">逐笔</h4>
      <li v-for="(item, v) in rtTicker" :key="v">
        <span v-title>{{ moment(item.time).format("HH:mm") }}</span>
        <span v-title>{{ changeMoney(item.price) }}</span>
        <span v-title>{{ item.volume }}</span>
        <span v-title>{{ item.ticker_direction }}</span>
      </li>
    </ul>
  </div>
  <!-- 小屏展示 -->
  <div class="DetailedSM" v-if="screenSize.num < 768">
    <h6
      v-if="Stocks['warn'].indexOf(Info.code) == -1"
      @click="handleClick('add', 'warn')"
    >
      加入预警
    </h6>
    <h6 v-else @click="handleClick('del', 'warn')">取消预警</h6>
    <el-divider direction="vertical" />
    <h6
      v-if="Stocks['gold'].indexOf(Info.code) == -1"
      @click="handleClick('add', 'gold')"
    >
      加入金池
    </h6>
    <h6 v-else @click="handleClick('del', 'gold')">取消金池</h6>
    <el-divider direction="vertical" />
    <h6>回测</h6>
    <el-divider direction="vertical" />
    <h6
      v-if="Stocks['concern'].indexOf(Info.code) == -1"
      @click="handleClick('add', 'concern')"
    >
      关注
    </h6>
    <h6 v-else @click="handleClick('del', 'concern')">取消关注</h6>
  </div>
</template>

<script setup>
import moment from "moment";
import { ElMessage } from "element-plus";
import { defaultApi } from "@/servers";
import {
  computed,
  nextTick,
  onMounted,
  ref,
  watch,
  reactive,
  onUnmounted,
} from "vue";
import {
  numToString,
  Percentage,
  takeDecimal,
  changeMoney,
} from "@/utils/base.js";
import { useStore } from "vuex";
const store = useStore();

const Info = ref({});
const Plate = reactive({
  HY: [],
  GN: [],
});
const OrderBook = reactive({
  Ask: [],
  Bid: [],
});
const Stocks = ref({
  concern: [],
  warn: [],
  gold: [],
});
const rtTicker = ref([]);
const times = ref(null);
const color = ["#fd1050", "#0cf49b"];
const txtStyle = ref({});
let type = computed(() => store.getters.system.type);
let code = computed(() => store.getters.system.code);
let market = computed(() => store.getters.system.market);
watch(
  code,
  (e) => {
    //初始化k线图
    nextTick(() => {
      getCodeDetail(e);
      getPlate(e);
      getOrderBook(e);
      getStocks("concern");
      getStocks("warn");
      getStocks("gold");
      getRtTicker(e);

      // 定位刷新
      reload(e);
    });
  },
  {
    immediate: true,
  }
);
// 所属板块
function getPlate(code) {
  defaultApi
    .plate({
      code,
    })
    .then((data) => {
      const { HY, GN } = data;
      Plate.HY = HY;
      Plate.GN = GN;
    });
}
// 代码详情
function getCodeDetail(code) {
  defaultApi
    .codeDetail({
      market: market.value,
      code,
    })
    .then((data) => {
      Info.value = data;
      // 国内
      if (Info.value.change_rate > 0 && type.value == 1) {
        txtStyle.value = {
          color: color[0],
        };
      }
      if (Info.value.change_rate < 0 && type.value == 1) {
        txtStyle.value = {
          color: color[1],
        };
      }
      // 国外
      if (Info.value.change_rate > 0 && type.value == 2) {
        txtStyle.value = {
          color: color[1],
        };
      }
      if (Info.value.change_rate < 0 && type.value == 2) {
        txtStyle.value = {
          color: color[0],
        };
      }
    });
}
// 标的摆盘
function getOrderBook(code) {
  defaultApi
    .orderBook({
      market: market.value,
      code,
    })
    .then((data) => {
      const { Ask = [], Bid = [] } = data;
      OrderBook.Ask = Ask.filter((i, v) => v < 5);
      OrderBook.Bid = Bid.filter((i, v) => v < 5);
    });
}
// 自选操作
function handleClick(opt, type) {
  defaultApi
    .opt({
      market: market.value,
      code: Info.value.code,
      name: Info.value.name,
      opt,
      type,
    })
    .then((data) => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      getStocks(type);
    });
}

// 自选操作列表
function getStocks(type) {
  defaultApi
    .stocks({
      market: market.value,
      type,
    })
    .then((data) => {
      Stocks.value[type] = data.map((i) => i.code);
    });
}

// 定时刷新
function reload(e) {
  // 定时刷新 300s
  if (times.value) {
    clearInterval(times.value);
    times.value = null;
  }
  times.value = setInterval(() => {
    getCodeDetail(e);
    getPlate(e);
    getOrderBook(e);
    getStocks("concern");
    getStocks("warn");
    getStocks("gold");
  }, 300000);
}
// 逐笔列表
function getRtTicker(code) {
  defaultApi
    .rtTicker({
      market: market.value,
      code,
    })
    .then((data) => {
      rtTicker.value = data;
    });
}

// 屏幕响应式
const screenSize = computed(() => {
  return store.getters.system.screenWidth;
});

onUnmounted(() => {
  // 清除定时器
  clearInterval(times.value);
  times.value = null;
});
</script>
<style lang="scss" scoped>
.Detailed {
  color: #999;
  border: 1px #999 solid;
  border-radius: 5px;
  padding: 5px;
  #title {
    padding: 10px 0;
    text-align: center;
    span {
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    > ul {
      width: 100%;
      justify-content: space-around;
      align-items: center;

      > span {
        width: 50%;
        font-weight: bold;
      }
      > li {
        width: 33%;
      }
    }
  }
  #orderBook {
    text-align: center;
    font-size: 14px;
    > div {
      display: flex;
      padding: 5px 0;
      > span {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:nth-child(2) {
          color: #38b35d;
        }
        &:nth-child(3) {
          color: #9fa20e;
        }
      }
    }
  }
  #table {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    > span {
      width: 25%;
      min-height: 30px;
      line-height: 30px;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      &:nth-child(2n) {
        color: #fff;
      }

      border-top: 1px solid #293441;
      border-left: 1px solid #293441;
      &:nth-child(4n) {
        border-right: 1px solid #293441;
      }
      &:nth-child(17),
      &:nth-child(18),
      &:nth-child(19),
      &:nth-child(20) {
        border-bottom: 1px solid #293441;
      }
    }
  }
  #operation {
    .btns {
      padding: 10px 20px;
      width: 100%;
      display: flex;
      ::v-deep .el-space__item {
        width: 30%;
      }
    }
  }
  #plate {
    > div {
      margin-top: 5px;
      display: flex;
      justify-content: center;
      span {
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  #rtTicker {
    li {
      margin-top: 5px;
      font-size: 14px;
      display: flex;
      align-items: center;
      text-align: center;
      span {
        width: 25%;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      span:nth-child(2),
      span:nth-child(3) {
        color: #38b35d;
      }
    }
  }
}
// 小屏
.DetailedSM {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  z-index: 999;
  display: flex;
  justify-content: space-around;
  background-color: rgba(40, 44, 52, 0.7);
  padding: 0 5vw;
  ::v-deep .el-divider--vertical {
    height: 100%;
    border-left-width: 1px;
  }
}

@media screen and (max-width: 768px) {
  .Detailed {
    margin-top: 20px;
  }
}
</style>